<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <p>a</p>
        <p>b</p>
        <p>c</p>
        <p>d</p>
        <p>e</p>
    </div>
    <script>

        // (function() {
        //     var num = 10;
        //     document.onclick = function() {
        //         num ++;
        //         alert(num);
        //     };
        // })();


        let aP = document.getElementsByTagName("p");
        
        // for(let i=0;i<5;i++) {
        //     aP[i].onclick = function() {
        //         alert(i);
        //     };
        // }

        // for(var i=0;i<5;i++) {
        //     function a(i) {
        //         aP[i].onclick = function() {
        //             alert(i);
        //         };
        //     }
        //     a(i);
        // }


        // function a(i) {
        //     aP[i].onclick = function() {
        //         alert(i);
        //     };
        // }
        // for(var i=0;i<5;i++) {
        //     a(i);
        // }

        for(var i=0;i<5;i++) {
            (function a(i) {
                aP[i].onclick = function() {
                    alert(i);
                };
            })(i);
        }
        

    </script>
</body>
</html>